const n = `
<template>\r
  <s-form label-width="8em" colon="：">\r
    <s-form-item label="按钮变体">\r
      <s-radio-group v-model="options.variant" :options="variantList"></s-radio-group>\r
    </s-form-item>\r
    <s-form-item label="按钮形状">\r
      <s-radio-group v-model="options.shape" :options="shapeList"></s-radio-group>\r
    </s-form-item>\r
    <s-form-item label="按钮状态">\r
      <s-radio-group v-model="options.disabled" :options="disabledList"></s-radio-group>\r
    </s-form-item>\r
    <s-form-item label="按钮示例">\r
      <s-flex direction="column" gap="1em">\r
        <s-flex gap="1em">\r
          <s-button\r
            :variant="options.variant"\r
            :shape="options.shape"\r
            :disabled="options.disabled"\r
            @click="handleButtonClick"\r
            >普通</s-button\r
          >\r
          <s-button\r
            theme="primary"\r
            :variant="options.variant"\r
            :shape="options.shape"\r
            :disabled="options.disabled"\r
            @click="handleButtonClick"\r
            >确认</s-button\r
          >\r
          <s-button\r
            theme="success"\r
            :variant="options.variant"\r
            :shape="options.shape"\r
            :disabled="options.disabled"\r
            @click="handleButtonClick"\r
            >成功</s-button\r
          >\r
          <s-button\r
            theme="warning"\r
            :variant="options.variant"\r
            :shape="options.shape"\r
            :disabled="options.disabled"\r
            @click="handleButtonClick"\r
            >警告</s-button\r
          >\r
          <s-button\r
            theme="danger"\r
            :variant="options.variant"\r
            :shape="options.shape"\r
            :disabled="options.disabled"\r
            @click="handleButtonClick"\r
            >危险</s-button\r
          >\r
          <s-button\r
            theme="cancel"\r
            :variant="options.variant"\r
            :shape="options.shape"\r
            :disabled="options.disabled"\r
            @click="handleButtonClick"\r
            >取消</s-button\r
          >\r
        </s-flex>\r
        <s-flex gap="1em">\r
          <s-button\r
            theme="primary"\r
            icon="download"\r
            :variant="options.variant"\r
            :shape="options.shape"\r
            :disabled="options.disabled"\r
            @click="handleButtonClick"\r
            >普通</s-button\r
          >\r
          <s-button\r
            theme="primary"\r
            icon="download"\r
            :variant="options.variant"\r
            :shape="options.shape"\r
            :disabled="options.disabled"\r
            @click="handleButtonClick"\r
          ></s-button>\r
        </s-flex>\r
      </s-flex>\r
    </s-form-item>\r
  </s-form>\r
</template>\r
\r
<script lang="ts">\r
import {\r
  BUTTON_SHAPE_DEFAULT,\r
  BUTTON_SHAPE_LABEL,\r
  BUTTON_SHAPE_OPTIONS,\r
  BUTTON_VARIANT_DEFAULT,\r
  BUTTON_VARIANT_LABEL,\r
  BUTTON_VARIANT_OPTIONS,\r
  MessageCommand,\r
} from "@smartcity/simple-ui";\r
import { Component, Vue } from "vue-property-decorator";\r
\r
@Component\r
export default class ButtonDemo extends Vue {\r
  /**\r
   * @description: 变体可选项列表\r
   * @private\r
   * @readonly\r
   * @type {Array<Object>}\r
   */\r
  readonly variantList = BUTTON_VARIANT_OPTIONS.map((variant) => ({\r
    value: variant,\r
    label: BUTTON_VARIANT_LABEL.get(variant),\r
  }));\r
\r
  /**\r
   * @description: 形状可选项列表\r
   * @private\r
   * @readonly\r
   * @type {Array<Object>}\r
   */\r
  readonly shapeList = BUTTON_SHAPE_OPTIONS.map((shape) => ({\r
    value: shape,\r
    label: BUTTON_SHAPE_LABEL.get(shape),\r
  }));\r
\r
  /**\r
   * @description: 禁用列表\r
   * @private\r
   * @readonly\r
   * @type {Array<Object>}\r
   */\r
  readonly disabledList = [\r
    { value: false, label: "启用" },\r
    { value: true, label: "禁用" },\r
  ];\r
\r
  /**\r
   * @description: 组件配置项\r
   * @private\r
   * @type {Object}\r
   */\r
  options = {\r
    variant: BUTTON_VARIANT_DEFAULT, // 按钮变体\r
    shape: BUTTON_SHAPE_DEFAULT, // 按钮形状\r
    disabled: false, // 按钮状态\r
  };\r
\r
  /**\r
   * @description: 处理按钮点击\r
   * @private\r
   * @returns\r
   */\r
  handleButtonClick(): void {\r
    MessageCommand.info("您点击了按钮");\r
  }\r
}\r
<\/script>\r
\r
<style lang="scss" scoped></style>\r
`; export { n as default };
